<template>
  <div class="advanced-operations">
    <el-card class="operation-card">
      <template #header>
        <div class="card-header">
          <span>Transaction</span>
        </div>
      </template>
      <el-form :model="transactionForm" label-width="120px">
        <el-form-item label="Commands">
          <el-input
              v-model="transactionForm.commands"
              type="textarea"
              placeholder="Enter commands in JSON format"
              :rows="6"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleTransaction">Execute Transaction</el-button>
        </el-form-item>
      </el-form>
      <div v-if="transactionResult" class="result-box">
        <h4>Result:</h4>
        <pre>{{ JSON.stringify(transactionResult, null, 2) }}</pre>
      </div>
    </el-card>

    <el-card class="operation-card">
      <template #header>
        <div class="card-header">
          <span>Pipeline</span>
        </div>
      </template>
      <el-form :model="pipelineForm" label-width="120px">
        <el-form-item label="Commands">
          <el-input
              v-model="pipelineForm.commands"
              type="textarea"
              placeholder="Enter commands in JSON format"
              :rows="6"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePipeline">Execute Pipeline</el-button>
        </el-form-item>
      </el-form>
      <div v-if="pipelineResult" class="result-box">
        <h4>Result:</h4>
        <pre>{{ JSON.stringify(pipelineResult, null, 2) }}</pre>
      </div>
    </el-card>

    <el-card class="operation-card">
      <template #header>
        <div class="card-header">
          <span>Lua Script</span>
        </div>
      </template>
      <el-form :model="scriptForm" label-width="120px">
        <el-form-item label="Script">
          <el-input
              v-model="scriptForm.script"
              type="textarea"
              placeholder="Enter Lua script"
              :rows="6"
          />
        </el-form-item>
        <el-form-item label="Keys">
          <el-input
              v-model="scriptForm.keys"
              type="textarea"
              placeholder="Enter keys (one per line)"
              :rows="3"
          />
        </el-form-item>
        <el-form-item label="Args">
          <el-input
              v-model="scriptForm.args"
              type="textarea"
              placeholder="Enter arguments (one per line)"
              :rows="3"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleScript">Execute Script</el-button>
        </el-form-item>
      </el-form>
      <div v-if="scriptResult" class="result-box">
        <h4>Result:</h4>
        <pre>{{ scriptResult }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { executeTransaction, executePipeline, executeScript } from '../api/redis'

const transactionForm = reactive({
  commands: ''
})

const pipelineForm = reactive({
  commands: ''
})

const scriptForm = reactive({
  script: '',
  keys: '',
  args: ''
})

const transactionResult = ref<any>(null)
const pipelineResult = ref<any>(null)
const scriptResult = ref<any>(null)

const handleTransaction = async () => {
  try {
    const commands = JSON.parse(transactionForm.commands)
    const response = await executeTransaction(commands)
    transactionResult.value = response.data
    ElMessage.success('Transaction executed successfully')
  } catch (error) {
    ElMessage.error('Transaction execution failed')
  }
}

const handlePipeline = async () => {
  try {
    const commands = JSON.parse(pipelineForm.commands)
    const response = await executePipeline(commands)
    pipelineResult.value = response.data
    ElMessage.success('Pipeline executed successfully')
  } catch (error) {
    ElMessage.error('Pipeline execution failed')
  }
}

const handleScript = async () => {
  try {
    const keys = scriptForm.keys.split('\n').filter(k => k.trim())
    const args = scriptForm.args.split('\n').filter(a => a.trim())
    const response = await executeScript(scriptForm.script, keys, args)
    scriptResult.value = response.data
    ElMessage.success('Script executed successfully')
  } catch (error) {
    ElMessage.error('Script execution failed')
  }
}
</script>

<style scoped>
.advanced-operations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.operation-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-box {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.result-box pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>